header {
    height: 100px;
    background: rgb(95, 51, 93);
    display: flex;
}

.react {
    width: 200px;
    height: 200px;
    float: left;
    margin-right: 20px;
    background: url('../images/react.png');
    background-size: cover;
}

.vue {
    width: 200px;
    height: 200px;
    float: left;
    background: url('../images/vue.png');
    background-size: cover;
}

@font-face {
    font-family: "iconfont";
    /* Project id 3826274 */
    src: url('../fonts/iconfont.woff2?t=1671007071016') format('woff2'),
        url('../fonts/iconfont.woff?t=1671007071016') format('woff'),
        url('../fonts/iconfont.ttf?t=1671007071016') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 100px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-icon{
    transition: 1s transform ease;
    display: block;
    width: 100px;
    height: 100px;
    transform: rotate(0deg);
}

.font-icon:hover{
    transform: rotate(360deg) scale(2);
}